<template>
  <el-radio-group v-model="name">
    <el-radio-button label="张三"></el-radio-button>
    <el-radio-button label="李四"></el-radio-button>
    <el-radio-button label="王五"></el-radio-button>
  </el-radio-group>
  您选择的是{{name}}
  <hr>
  <el-radio-group v-model="price">
<!--  如果没有标签体内的文本 则 label即设置了显示的内容 同时也为选中后得到的内容
  如果设置了标签体的文本 则label只是得到的内容, 显示的内容为标签体内的文本-->
    <el-radio-button v-for="p in arr" :label="p.price">{{p.title}}</el-radio-button>
  </el-radio-group>
  <h3>您选择的商品是{{price}}元</h3>
</template>

<script setup>
  import {ref} from "vue";
  const price = ref('');
  const arr = ref([{title:"华为手机",price:5000},
    {title:"安踏拖鞋",price:150},
    {title:"李宁篮球",price:200}])
  const name = ref("李四");
</script>

<style scoped>

</style>